
let form = layui.form;

// 获取地址栏的文章id
let id = new URLSearchParams(location.search).get('id');

// -----------------------  处理下拉框的分类 ---------------------------
$.ajax({
  url: '/my/category/list',
  success: function (res) {
    let html = template('tpl-category', res);
    $('select').html(html);
    // 动态创建的下拉框，必须要更新渲染
    form.render('select');
    // ----------------- 必须等下拉框的分类渲染完毕，才能进行数据回填 ------
    // 发送ajax请求，获取文章详情
    $.ajax({
      url: '/my/article/' + id,
      success: function (res) {
        // console.log(res);
        form.val('article', res.data);
        // ------ 先进行数据回填，回填内容到 textarea 里面，最后在替换成富文本编辑器 ----------------
        initEditor();
        // -------- 更换剪裁区的图片 ------------
        $image.cropper('destroy').attr('src', baseUrl + '/' + res.data.cover_img).cropper(option);
      }
    })
  }
});



// ----------------------- 处理封面图片 -------------------------------
// 1. 初始化剪裁框
let $image = $('#image');
let option = {
  // 宽高比
  aspectRatio: 400 / 280,
  // 指定预览的容器
  preview: '.img-preview',
  // 设置剪裁框相对图片的比例，默认 0.8
  autoCropArea: 1
};
$image.cropper(option);
// 2. 点击 “选择封面” 按钮，能够选择图片
$('button:contains("选择封面")').on('click', function () {
  $('#file').trigger('click');
})
// 3. 当切换了文件域的图片，能够更换剪裁区的图片
$('#file').on('change', function () {
  if (this.files.length > 0) {
    let url = URL.createObjectURL(this.files[0]);
    $image.cropper('destroy').attr('src', url).cropper(option);
  }
});


// ----------------------- 完成编辑文章 -------------------------------
$('#edit-form').on('submit', function (e) {
  e.preventDefault();
  // this ==> $(this)
  // FormData也是根据表单各项的name属性收集值的，所以要检查表单各项的name属性
  let fd = new FormData(this); // 传入表单的DOM对象
  // 检查 fd 中有哪些数据 （title、state、cate_id）
  // 修改content
  fd.set('content', tinyMCE.activeEditor.getContent());
  // 追加cover_img(剪裁图片)
  let canvas = $image.cropper('getCroppedCanvas', { width: 400, height: 280 });
  canvas.toBlob(function (blob) {
    // blob 是一个二进制大对象，把他追加到 fd 中，就会形成文件对象
    fd.append('cover_img', blob);
    // 修改的时候，接口需要文章id
    fd.append('id', id);

    // fd.forEach((val, key) => {
    //   console.log(key, val);
    // })

    // 检查各项参数都没有问题，则ajax提交数据
    $.ajax({
      type: 'POST',
      url: '/my/article/update',
      data: fd,
      processData: false,
      contentType: false,
      success: function (res) {
        if (res.status === 0) {
          layer.msg(res.message, { time: 1000 }, function () {
            // 1s 之后，跳转到文章列表页
            location.href = './list.html';
          })
        } else {
          layer.msg(res.message);
        }
      }
    })
  });
})

